<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="$router.back()" />
      <van-skeleton>
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <van-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <van-skeleton-paragraph row-width="60%" />
   
      </div>
    </div>
  </template>
</van-skeleton>
    </header>
    <main class="content">
<div>
  <van-swipe style="width: 100%;
  height: 200px;" lazy-render :autoplay="3000">
  <van-swipe-item >
    <img style="width: 100%;
    height: 200px;" :src="detailIfor.image" alt="">
  </van-swipe-item>
  <van-swipe-item >
    <img style="width: 100%;
    height: 200px;" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" alt="">
  </van-swipe-item>
  <van-swipe-item >
    <img style="width: 100%;
    height: 200px;" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" alt="">
  </van-swipe-item>
</van-swipe>
</div>
<div class="van-ellipsis">{{ detailIfor.title }}</div>
<div style="color: red;">￥{{ detailIfor.price }}</div>
    </main>
  </div>
  <footer>
    <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.totalCount"  @click="$router.push('/cart')"/>
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" @click="onAdd" />
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
  </footer>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import request from '@/tool/request'
import { useRoute } from 'vue-router';
const route=useRoute()
const detailIfor=ref({})
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
onMounted(()=>{
request.get('/detail',{
  params:{
    id:route.params.id
  }
}).then(res=>{
  if(res.data.code==200){
    detailIfor.value=res.data.data
  }
})
})
const onAdd=()=>{
  store.addItem(detailIfor.value)
}
</script>

<style lang="scss" scoped></style>